import React, { useRef, useState } from 'react';
import type { ActionType } from '@ant-design/pro-table';
import { ProColumns } from '@ant-design/pro-table';
import {
  addTenant,
  deleteTenant,
  getFormatTenant,
  listTenant,
  updateTenant,
} from './api';
import { handleRemove } from '@/utils/actions';
import MegaCreateForm from '@/compoments/MegaCreateForm';
import MegaUpdateForm from '@/compoments/MegaUpdateForm';
import MegaTable from '@/compoments/MegaTable';
import { TenantEntity } from './entities';
import { formChildren } from './form';
import { Tag } from 'antd';

export default () => {
  const tableActionRef = useRef<ActionType>();

  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);

  const [currentEntity, setCurrentEntity] = useState<TenantEntity>();

  const transform = (value: any) => {
    const { allow_nodes } = value;
    return {
      ...value,
      allow_nodes: allow_nodes.join(','),
    }
  }

  const tableColumns: ProColumns<TenantEntity>[] = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '节点',
      dataIndex: 'allow_nodes',
      render: (_, record, __, ___) => {
        const { allow_nodes } = record;
        if (!allow_nodes) return null;
        const nodes = allow_nodes.split(',')
        return nodes.map((item) => <Tag key={item}>{item}</Tag>);
      }
    },
    {
      title: '最大CPU(核)',
      dataIndex: 'max_cpu',
    },
    {
      title: '最大内存(G)',
      dataIndex: 'max_memory',
    },
    {
      title: '最大硬盘(G)',
      dataIndex: 'max_disk',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="edit"
          onClick={() => {
            setCurrentEntity(record);
            handleUpdateModalVisible(true);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={async () => {
            await handleRemove(record.id, deleteTenant);
            tableActionRef.current?.reloadAndRest?.();
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  return (
    <div style={{ paddingTop: 16 }}>
      <MegaTable
        handleCreateModalVisible={handleCreateModalVisible}
        columns={tableColumns}
        actionRef={tableActionRef}
        title={'租户'}
        tableRequest={listTenant}
        deleteRowAction={deleteTenant}
        search={false}
      />

      <MegaCreateForm
        handleModalVisible={handleCreateModalVisible}
        actionRef={tableActionRef}
        modalVisible={createModalVisible}
        title={'新增租户'}
        addEntityAction={addTenant}
        transform={transform}
      >
        {formChildren()}
      </MegaCreateForm>

      <MegaUpdateForm
        handleModalVisible={handleUpdateModalVisible}
        actionRef={tableActionRef}
        modalVisible={updateModalVisible}
        currentEntity={currentEntity}
        title={'编辑租户'}
        getEntityAction={getFormatTenant}
        updateEntityAction={updateTenant}
        transform={transform}
      >
        {formChildren()}
      </MegaUpdateForm>
    </div>
  );
}
